import { ref, computed, watch, onMounted } from "vue";
import { ElMessage } from "element-plus";

export type Theme = "light" | "dark";

export interface ThemeConfig {
  name: string;
  value: Theme;
  icon: string;
  iconComponent: string;
  description: string;
}

export const themes: ThemeConfig[] = [
  {
    name: "明亮",
    value: "light",
    icon: "☀️",
    iconComponent: "Sunny",
    description: "明亮的浅色主题",
  },
  {
    name: "深色",
    value: "dark",
    icon: "🌙",
    iconComponent: "Moon",
    description: "优雅的深色主题",
  },
];

export function useTheme() {
  const currentTheme = ref<Theme>("light");
  const isDark = computed(() => currentTheme.value === "dark");

  // 从本地存储加载主题
  const loadTheme = () => {
    const savedTheme = localStorage.getItem("theme") as Theme;
    if (savedTheme && themes.some((t) => t.value === savedTheme)) {
      currentTheme.value = savedTheme;
    } else {
      // 检测系统主题偏好
      const prefersDark = window.matchMedia(
        "(prefers-color-scheme: dark)",
      ).matches;
      currentTheme.value = prefersDark ? "dark" : "light";
    }
    applyTheme();
  };

  // 应用主题到DOM和Element UI
  const applyTheme = () => {
    const html = document.documentElement;
    
    // 移除旧的类名
    html.classList.remove("light", "dark");
    
    // 添加新的类名
    html.classList.add(currentTheme.value);
    
    // 设置Element UI的主题 - 正确的暗色主题配置
    if (currentTheme.value === "dark") {
      html.setAttribute("data-theme", "dark");
      document.body.classList.add("dark");
    } else {
      html.removeAttribute("data-theme");
      document.body.classList.remove("dark");
    }

    // 保存到本地存储
    localStorage.setItem("theme", currentTheme.value);

    // 触发自定义事件
    window.dispatchEvent(
      new CustomEvent("theme-change", {
        detail: { theme: currentTheme.value },
      }),
    );
  };

  // 切换主题
  const setTheme = (theme: Theme) => {
    currentTheme.value = theme;
    applyTheme();
    ElMessage.success(`已切换到${theme === "dark" ? "深色" : "浅色"}主题`);
  };

  // 切换明暗主题
  const toggleTheme = () => {
    const newTheme = currentTheme.value === "dark" ? "light" : "dark";
    setTheme(newTheme);
  };

  // 获取当前主题配置
  const currentThemeConfig = computed(
    () => themes.find((t) => t.value === currentTheme.value) || themes[0],
  );

  // 监听系统主题变化
  const watchSystemTheme = () => {
    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
    const handleChange = (e: MediaQueryListEvent) => {
      // 只有在用户没有手动设置主题时才跟随系统
      if (!localStorage.getItem("theme")) {
        currentTheme.value = e.matches ? "dark" : "light";
        applyTheme();
      }
    };

    mediaQuery.addEventListener("change", handleChange);
    return () => mediaQuery.removeEventListener("change", handleChange);
  };

  // 监听主题变化
  watch(currentTheme, () => {
    applyTheme();
  });

  onMounted(() => {
    loadTheme();
    watchSystemTheme();
  });

  return {
    currentTheme,
    isDark,
    themes,
    currentThemeConfig,
    setTheme,
    toggleTheme,
    loadTheme,
  };
}
